<template>
  <div>
    <input type="file" @change="handleChange">
    <img :src="newImg" alt="">
  </div>
</template>

<script>
export default {
  data() {
    return {
      newImg: ''
    }
  },
  methods: {
    handleChange(e) {
      console.log(e)
      console.log(e.target.files[0])
      const file = e.target.files[0]
      console.log(window.URL.createObjectURL(file))
      // 1、上传图片，展示渲染（将file对象转换成url对象）
      // this.newImg = window.URL.createObjectURL(file)

      // 2、将file对象，转换成base64位对象
      const reader = new FileReader()
      reader.readAsDataURL(file) // 异步加载
      reader.onload = (e) => {
        this.newImg = e.target.result // 使用箭头函数，保证this指向上级作用域
      }
    }
  }
}
</script>

<style>

</style>
